<template>
  <div class="productsNews">
    <ContentTitle title="产品动态"></ContentTitle>
    <div class="productsNews_content">
      <div
        class="content_item"
        v-for="childItem in productsNews[currentPage - 1]"
        :key="childItem.id"
      >
        <img :src="childItem.cover" alt="" />
        <div class="info">
          <div class="crateTimeAndTitle">
            <div class="crateTime">{{ childItem.crateTime }}</div>
            <span>/</span>
            <div class="title">{{ childItem.title }}</div>
          </div>
          <div class="subsidiaryTitle">{{ childItem.subsidiaryTitle }}</div>
          <div class="content">{{ childItem.content }}</div>
        </div>
      </div>
    </div>
    <el-pagination
      :background="true"
      layout="prev, pager, next"
      :pager-count="5"
      :total="productsNewsCount"
      :page-size="9"
      :hide-on-single-page="true"
      :current-page="1"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import ContentTitle from "components/ContentTitle";
export default {
  name: "ProductsNews",
  data() {
    return {
      /* 产品动态 */
      productsNews: [
        [
          {
            id: 0,
            cover:
              "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/productIntroduce/productsNews1.jpg",
            crateTime: "2020.10.10",
            title: "地球找房",
            subsidiaryTitle: "地球找房功能",
            content:
              "核心内容：为了用户更方便的使用该小程序，本项目主要可查看到大湾区的各个楼盘，用户可直接在小程序搜索到需要的房源，也可通过小程序联系到房源的负责人，皆达成看房及购房。",
          },
          {
            id: 1,
            cover:
              "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/productIntroduce/productsNews2.jpg",
            crateTime: "2020.10.10",
            title: "经纪人帮帮",
            subsidiaryTitle: "经纪人帮帮功能",
            content:
              "核心内容：房产销售用户可在该小程序发布二手房、租房信息等，发布后会在《地球找房》上展示，提供给购房客户查看。重要功能：房产销售用户可直接在新房界面点击报备，即可发送至平台，皆可带客户看房、使得成交。",
          },
          {
            id: 3,
            cover:
              "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/productIntroduce/productsNews3.jpg",
            crateTime: "2020.10.10",
            title: "渠道商助手",
            subsidiaryTitle: "渠道商助手功能",
            content:
              "核心内容：该小程序非常利于渠道用户，含有最新房源信息，每个楼盘都配有专门的驻场及联系方式，同时也解决了渠道用户的各大痛点，个人中心可保留及查看自己的业绩，已接收的报备等。该产品实用、简单化、使用户操作更便捷。",
          },
        ],
      ],
      marginTop: 0,
      /* 当前页码 */
      currentPage: 1,
    };
  },
  components: {
    ContentTitle,
  },
  computed: {
    /* 暂时废弃 用于设置a标签与浏览器上面距离 */
    anchorLocation() {
      return {
        marginTop: this.marginTop + "rem",
      };
    },
    /* 产品动态总条数 */
    productsNewsCount() {
      let count = 0;
      this.productsNews.forEach((v) => {
        count += v.length;
      });
      return count;
    },
  },
  mounted() {
    /* 绑定滚动事件 */
    // window.addEventListener("scroll", this.anchor);
  },
  methods: {
    /* 获取滚动时的高度 */
    anchor() {
      let anchor = document.getElementById("anchor");
      this.marginTop = this.getElementViewPosition(anchor).y == 0 ? 17 : 0;
    },
    /* 获取元素绝对 位置 */
    getElementViewPosition(element) {
      //计算x坐标
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;
      while (current !== null) {
        actualLeft += current.offsetLeft + current.clientLeft;
        current = current.offsetParent;
      }
      if (document.compatMode == "BackCompat") {
        var elementScrollLeft = document.body.scrollLeft;
      } else {
        var elementScrollLeft = document.documentElement.scrollLeft;
      }
      var left = actualLeft - elementScrollLeft;
      //计算y坐标
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop + current.clientTop;
        current = current.offsetParent;
      }
      if (document.compatMode == "BackCompat") {
        var elementScrollTop = document.body.scrollTop;
      } else {
        var elementScrollTop = document.documentElement.scrollTop;
      }
      var right = actualTop - elementScrollTop;
      //返回结果
      return { x: left, y: right };
    },
    /* 分页组件：当前页面发生改变 */
    pageChange(e) {
      this.currentPage = e;
    },
  },
};
</script>

<style lang="less" scoped>
.productsNews {
  width: 100vw;
  // padding: 0 45.8rem;
  padding-bottom: 9rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .contentTitle {
    margin: 0 auto;
    margin-top: 4.4rem;
  }
  .productsNews_content {
    margin-top: 7.4rem;
    width: 100.4rem;
    display: flex;
    flex-wrap: wrap;
    .content_item {
      height: 29rem;
      width: 27rem;
      margin-bottom: 3.8rem;
      border-radius: 0.5rem;
      position: relative;
      overflow: hidden;
      &:hover {
        .info {
          top: 6rem;
          border-radius: 1rem 1rem 0 0;
          height: 29rem;
        }
      }
      &:nth-of-type(3n + 2) {
        margin: 0 9.7rem;
      }
      img {
        width: 27rem;
        /* height: 20rem; */
      }
      .info {
        position: absolute;
        top: 20rem;
        left: 0;
        width: 27rem;
        background-color: white;
        height: 9rem;
        padding: 1rem;
        box-sizing: border-box;
        font-size: 1.6rem;
        transition: all 0.2s;
        overflow-y: auto;
        padding-bottom: 10rem;
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        &::-webkit-scrollbar-track {
          border-radius: 3px;
          background: rgba(0, 0, 0, 0.06);
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background: rgba(0, 0, 0, 0.12);
          -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
        }
        & > div {
          margin-bottom: 0.6rem;
        }
        .crateTimeAndTitle {
          display: flex;
          align-items: center;
          color: #fa423d;
          span {
            margin: 0 1rem;
          }
        }
        .subsidiaryTitle {
        }
        .content {
          font-size: 1.2rem;
          color: #555555;
          line-height: 2.2rem;
        }
      }
    }
  }
  .el-pagination,
  .is-background {
    text-align: right;
    padding-right: 0;
    margin-right: -0.5rem;
  }
}
</style>
